<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Loader Ball</title>

  <style>
    .container {
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
  </style>

  <link rel="stylesheet" href="css-loader.css">
</head>
<body>

  <!-- Loader -->
  <div class="loader loader-ball is-active" data-shadow></div>

  <!-- Fake content -->
  <div class="container">
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!</p>
    <ul>
      <li>Lorem ipsum dolor sit.</li>
      <li>Lorem ipsum dolor sit.</li>
      <li>Lorem ipsum dolor sit.</li>
      <li>Lorem ipsum dolor sit.</li>
    </ul>
    <h2>Lorem ipsum dolor sit amet.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
  </div>
  <script src="http://localhost:35729/livereload.js"></script>
</body>
</html>
